import React, { useState } from 'react';
import { Modal, Button, message, Input, Upload, Row, Col, Space, Image, Avatar } from 'antd';
import { SmileTwoTone } from '@ant-design/icons';
import style from './index.module.css';
import {
    EnvironmentTwoTone,
    PictureTwoTone,
} from "@ant-design/icons";
import { throttle } from './../../../utils/throttle';
import { post } from './../../../utils/post';
const { TextArea } = Input;
function PostMessage(props) {
    const [loading, changeLoading] = useState(false);
    const userMsg = JSON.parse(localStorage.getItem('usersMessage'))
    const handleOk = async () => {
        changeLoading(true)
        if (!inputValue) {
            message.warning('请输入一点东西吧~')
            changeLoading(false);
            props.changeShow(false);
            return
        }
        console.log(userMsg, 'userMsg');
        post('/api/publicImg', { content: inputValue, image: Array.from(imgArr), id: userMsg._id, nickname: userMsg.nickname, avater: userMsg.avater }).then(res => {
            changeLoading(false);
            props.changeShow(false);
            imgArr.clear()
        }).catch(res => {
            changeLoading(false);
            props.changeShow(false);
            console.log(res);
        })
        // location.reload()
    };
    let imgArr = new Set()
    let inputValue
    const handleCancel = () => {
        setTimeout(() => {
            props.changeShow(false);
        }, 0);

    };
    const onChange = e => {
        inputValue = e.target.value
    };

    const showInfo = () => {
        return (
            <>
                <Avatar src={userMsg.avater}  />
                <p className={`${style.title}`}>What is happening?</p>
            </>
        )
    }

    const someImg = {
        name: 'file',
        action: `${import.meta.env.VITE_APP_URL}/api/fileImg`,
        listType: 'picture',
        headers: {
            authorization: `${localStorage.getItem(import.meta.env.VITE_APP_TOKEN)}`,
        },
        multiple: true,
        onChange(info) {
            console.log(info, '---info---');
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
            if (info.fileList[info.fileList.length - 1].response) {
                info.fileList.forEach(item => {
                    imgArr.add(item.response.url)
                })
                console.log(imgArr, '---imgArr---', info.fileList.length, '--some--');
            }
        },
        async onRemove(info) {
            console.log(info, 'onRemove---');
            if (info.response == undefined) {
                return true
            }
            if (info.response.url) {
                imgArr.delete(info.response.url)
                const result = await post('/api/deletePublicImg', { url: info.response.url })
                console.log(result, '----');
                if(result.data.status == 200){
                    message.success('删除成功')
                }else{
                    message.file('删除失败')
                }
                return true
            }

        }
    };

    const content = () => {
        return (
            <>
                <TextArea
                    className={`${style.input}`}
                    placeholder="说点什么...."
                    onChange={throttle(onChange, '500')}
                />
                {/* <Popover placement="bottom" title={'who can reply?'} content={changeReplyContent} trigger="click">
                    <Button type="primary" shape="round" icon={IconTable[reply]} size="small">
                        {message[reply]}
                    </Button>
                </Popover> */}

                <Row className={`${style.bottom}`}>
                    <Col span={8} >
                        <Space>
                            <Upload {...someImg}>
                                <PictureTwoTone />
                            </Upload>
                            {/*<EnvironmentTwoTone />*/}
                            {/*<SmileTwoTone />*/}
                        </Space>
                    </Col>
                    <Col span={8} offset={8}>
                        <Button type="primary" shape="round" onClick={handleOk} loading={loading} style={{ float: 'right' }}>
                            发送
                        </Button>
                    </Col>
                </Row>
            </>
        )
    }
    return (
        <>
            <Modal
                style={{ position: 'absolute', left: '35%', height: '280px' }}
                bodyStyle={{ borderRadius: '20px', height: '280px' }}
                width={600}
                visible={props.show}
                onCancel={handleCancel}
                footer={null}
                mask={false}
            >
                {
                    showInfo()
                }{
                    content()
                }
            </Modal>
        </>

    );
}
export default PostMessage;